<template>
	<view class="">
		<view :class="{'u-border-bottom':borderBottom}" class="u-p-l-30 u-p-r-30">
			<view class="u-m-b-18 u-flex u u-m-t-30" v-if="showHeader" style="justify-content: space-between;align-items: center">
				<view style="display: flex;align-items: center;">
					<img :src="userInfo.avatar" class="u-m-r-8" @click.stop="toPersonal(userInfo)"
						style="width: 60rpx;height: 60rpx;border-radius: 100%">
					<view class="userName u-font-28" @click.stop="toPersonal(userInfo)">
						{{userInfo.nickName || userInfo.userName || ''}}
					</view>
					<image :src="userInfo.officalFlag==='1'?'https://app.zbzedu.com/static/WaChat/img/guanfang.png':''" mode=""
						style="width: 68rpx;height: 32rpx;margin: 10rpx;"></image>
				</view>
				<view v-if="showAction || !isCurrentUser" style="display: flex;align-items: center;">
					<view class="u-m-r-10 u-flex u-col-center">
						<image src="https://app.zbzedu.com/static/WaChat/icon/forum/redu@3x.png" style="height: 16px;width: 16px;"></image>
						<text style="color: red;font-weight: bold;font-size: 24rpx;margin:0 5rpx;">{{infoData.accessNum}}</text>
					</view>
					<view class="">
						<u-icon name="more-dot-fill" @click="clickMore" color="rgba(4, 4, 4, 0.5)" size="36"></u-icon>
					</view>
				</view>
			</view>
			<view class="u-flex" v-if="showType" @click="toDetails(infoData)">
				<view class="u-flex u-p-l-22 u-p-r-22 huati-wrp u-p-t-10 u-p-b-10"
					@click.stop="toList(infoData.diaryType)" v-if="infoData.diaryType">
					<view class="huati u-m-r-8">
						<u-icon name="https://app.zbzedu.com/static/WaChat/icon/forum/huati.png" size="32"></u-icon>
					</view>
					<view class="u-font-28 color-active">{{infoData.diaryType}}</view>
				</view>
			</view>
			<view class="color-16 u-font-32 u-m-t-16" :class="{'u-line-3': eclipse}"
				@click="toDetails(infoData)">
				<text space="nbsp" style="word-break: break-all" >{{ infoData.diaryDesc }}
				</text>
			</view>
			<view class="u-m-b-10" v-if='showMore' @click="toDetails(infoData)">
				<text  class="font-32"  style="color: #396AA5;">查看全部</text>
			</view>
			<view class="img-wrp u-m-t-16" v-if="infoData.fileList.length" @click="toDetails(infoData)">
				<view class="single-img" v-if="infoData.fileList.length === 1">
					<img :src="item.fileUrl" class="img" mode="aspectFill" v-for="(item,index) in infoData.fileList"
						@click.stop="preview(infoData.fileList, item)" :key="index"/>
				</view>
				<view class="imgs u-flex flex-between u-flex-wrap" v-if="infoData.fileList.length > 1">
					<img :src="item.fileUrl" class="img" mode="aspectFill" v-for="(item,index) in infoData.fileList"
						@click.stop="preview(infoData.fileList, item)" :key="index" />
					<text style="width: 216rpx;"></text>
				</view>
			</view>
			<view class="u-p-t-24 u-p-b-24 u-font-20" style="color: rgba(4, 4, 4, .38)" v-if="!eclipse">
				<text class="u-m-r-8">更新于</text>{{ infoData.createTime ? infoData.createTime.split(' ')[0] :""  }}
			</view>
			<!-- 分享点赞样式 -->
			<view class="tool-bar u-p-b-20" v-if="showTool">
				<view style="display: flex;justify-content: space-evenly;align-items: center;">
					<view style="display: flex;justify-content: center;align-items: center;">
						<button style="background: transparent;color: #101010;font-size: 28upx;display: flex;"
							class="button-row" id="shareBtn" open-type="share" type="primary">
							<u-icon name="https://app.zbzedu.com/static/WaChat/icon/share.png" color="#888" size="36"
								class="u-m-r-10"></u-icon>
							<span>分享</span>
						</button>
					</view>

					<view class="item-bar u-flex flex-center u-m-r-20" @click.stop="toAddComment(infoData)">
						<u-icon name='https://app.zbzedu.com/static/WaChat/icon/env.png' color="#888" size="36" class="u-m-r-10">
						</u-icon>
						<span>{{infoData.commentNum || '回复'}}</span>
					</view>
					<view class="item-bar u-flex flex-center" @click.stop="like">
						<u-icon
							:name="infoData.likeFlag ? 'https://app.zbzedu.com/static/WaChat/icon/liked.png' :'https://app.zbzedu.com/static/WaChat/icon/like.png' "
							size="36" class="u-m-r-10"></u-icon>
						<span
							:class="{'color-active': infoData.likeFlag }">{{infoData.likeNum ? infoData.likeNum : '点赞'}}</span>
					</view>

				</view>
			</view>
			<u-action-sheet :list="isCurrentUser ? delList : jubaolist" v-model="show" @click.stop="click"
				border-radius="18"></u-action-sheet>
		</view>
		<view class="" v-if="lineShow">
			<u-gap height="20" bg-color="#EEEEEE" v-if="showTool && !showLine"></u-gap>
			<u-gap height="2" bg-color="#EEEEEE"></u-gap>
			<u-gap height="2" bg-color="#eeeeee" v-show="showLine"></u-gap>
		</view>
		<view class="" v-else>
			<u-gap height="10" bg-color="#E3E3E3"></u-gap>
		</view>
	</view>
</template>

<script>
	import {
		THEME
	} from "../../mixins/config.js";
	import {
		request
	} from "../../../util/api";
	import {
		TOAST
	} from '../../../util/util'
	import {
		CHECK_TOKEN
	} from '../../../util/util'

	export default {
		props: {
			showMore:{
				type:Boolean,
				default(){
					return false
				}
			},
			infoData: Object,
			userInfo: Object,
			showLine:{
				type:Boolean,
				default () {
					return false
				}
			},
			lineShow:{
				type:Boolean,
				default () {
					return true
				}
			},
			showHeader: {
				type: Boolean,
				default () {
					return true
				}
			},
			showType: {
				type: Boolean,
				default () {
					return true
				}
			},
			borderBottom: {
				type: Boolean,
				default () {
					return false
				}
			},
			showTool: {
				type: Boolean,
				default () {
					return true
				}
			},
			eclipse: {
				type: Boolean,
				default () {
					return true
				}
			},
			typeClick: {
				type: Boolean,
				default () {
					return true
				}
			},
			showAction: {
				type: Boolean,
				default () {
					return true
				}
			}
		},

		data() {
			return {
				list: {},
				jubaolist: [{
					text: '举报',
					color: THEME.text_active_color
				}],
				delList: [{
					text: '删除',
					color: '#FF0101'
				}],
				show: false,
				userId: ''
			}
		},
		mounted() {
			if (CHECK_TOKEN()) {
				this.getCurrentUser()
			}
		},

		computed: {
			isCurrentUser() {
				if (this.userInfo) {
					return this.userInfo.userId === uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
				}
				return false
			}
		},

		methods: {
			clickMore() {
				this.show = true
			},
			toList(item) {
				if (!this.typeClick) {
					return
				}
				this.$u.route({
					url: '/package/forum/diaryList?type=' +encodeURIComponent(item)
				})
			},

			toPersonal(data) {
				this.$u.route({
					url: '/package/forum/personal?id=' + data.userId
				})
			},

			click() {
				if (this.isCurrentUser) {
					uni.showModal({
						title: '提示',
						content: '确认删除该日记吗？',
						success: res => {
							if (res.confirm) {
								request({
									url: '/system/CompassDiary/' + this.infoData.id,
									method: 'DELETE'
								}).then(res => {
									this.$emit('delete')
									TOAST('删除成功!')
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确认举报该日记吗？',
						success: res => {
							if (res.confirm) {
								console.log('用户点击确定');
								request({
									url: '/system/DiaryReport',
									method: 'post',
									data: {
										linkId: this.infoData.id,
										linkType: 1
									}
								}).then(res => {
									TOAST('举报成功!')
								})
							}
						}
					})
				}
			},

			toDetails(data) {
				if (!this.eclipse) {
					return
				}
				this.$u.route({
					url: '/package/forum/details?id=' + data.id
				})
			},

			getCurrentUser() {
				let storage = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
				if (storage.userId) {
					this.userId = storage.userId
					return
				}
				request({
					url: '/app/userCenter/getLoginUserInfo'
				}).then(ret => {
					this.list = ret.data;
					if (ret.data && ret.data.avatar) {
						this.avatar = ret.data.avatar;
					} else {
						this.avatar = "../../image/photo.png";
					}
					let storage = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
					storage.userId = ret.data.userId
					this.userId = ret.data.userId
					uni.setStorageSync(process.env.NODE_ENV + 'zbz_user', storage)
				})
			},

			preview(list, current) {
				const tempFilePaths = list.map(item => item.fileUrl)
				uni.previewImage({
					urls: tempFilePaths,
					current: current.fileUrl
				})
			},

			toAddComment(data) {
				this.toDetails(data)
				return
				this.$u.route({
					url: '/pages/forum/addComment?id=' + data.id
				})
			},

			like() {
				request({
					url: `/system/CompassLikeLog/system/wx/updateLikeLog/${this.infoData.id}/4`
				}).then(res => {
					if (res.msg == '点赞成功') {
						this.infoData.likeNum++
					} else {
						this.infoData.likeNum--
					}
					this.infoData.likeFlag = !this.infoData.likeFlag
					this.$emit('likeChange', this.infoData)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-wrp {
		.single-img .img {
			width: 494rpx;
			height: 282rpx;
			border-radius: 12rpx;
		}

		.imgs .img {
			width: 216rpx;
			height: 216rpx;
			border-radius: 12rpx;
		}
	}

	.userName {
		color: #406FA8;
		font-weight: bold;
	}

	.huati-wrp {
		background-color: rgba(4, 4, 4, 0.08);
		border-radius: 26rpx;
	}

	.huati {
		width: 32rpx;
		height: 32rpx;
		border-radius: 100%;
		background: $btn_active_bg_color;
		color: #fff;
		text-align: center;
	}

	.color-16 {
		color: rgba(16, 16, 16, 1);
	}

	.button-row {
		padding-left: 0;
	}

	.button-row::after {
		content: "";
		border: none;
	}
</style>
